<template>
  <div class="button-document">
    <div style="padding: 8px; margin: 8px 0">
      <div style="font-size: 28px; font-weight: 500; margin-bottom: 16px">Input输入框</div>
      <span>通过鼠标或键盘输入内容，是最基础的表单域的包装。</span>
    </div>
    <div class="button-document-code">
      <div class="button-document-code-title">代码演示</div>
      <div class="button-document-code-content">
        <div class="button-document-code-content-item">
          <CodeCard :description="codeDes[0].description" :code="codeDes[0].code">
            <div style="padding: 8px; border-bottom: 1px solid #f0f0f0">
              <Input placeholder="请输入内容" />
            </div>
          </CodeCard>
          <CodeCard :description="codeDes[2].description" :code="codeDes[2].code">
            <div style="padding: 8px; border-bottom: 1px solid #f0f0f0">
              <Input inline placeholder="不可输入状态的输入框" disabled />
            </div>
          </CodeCard>
          <CodeCard :description="codeDes[3].description" :code="codeDes[3].code">
            <div style="padding: 8px; border-bottom: 1px solid #f0f0f0">
              <Input inline placeholder="请输入内容" prefix="plus" suffix="check" />
            </div>
          </CodeCard>
        </div>
        <div class="button-document-code-content-item">
          <CodeCard :description="codeDes[1].description" :code="codeDes[1].code">
            <div style="padding: 8px; border-bottom: 1px solid #f0f0f0">
              <Input inline placeholder="请输入内容" label="姓名:" />
            </div>
          </CodeCard>
          <CodeCard :description="codeDes[4].description" :code="codeDes[4].code">
            <div style="padding: 8px; border-bottom: 1px solid #f0f0f0">
              <Input
                inline
                placeholder="请输入内容"
                type="password"
                showPassword
                label="密码:"
                v-model="originalPass"
              />
            </div>
          </CodeCard>
          <CodeCard :description="codeDes[5].description" :code="codeDes[5].code">
            <div style="padding: 8px; border-bottom: 1px solid #f0f0f0">
              <Input inline placeholder="请输入内容" type="text" clearable v-model="originValue" />
            </div>
          </CodeCard>
        </div>
      </div>
    </div>
    <div style="padding: 8px">
      <div style="font-size: 24px">API</div>
      <section class="easy-markdown">
        <table>
          <thead>
            <tr>
              <th>参数</th>
              <th>说明</th>
              <th>类型</th>
              <th>默认值</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>inline</td>
              <td>带有标签的输入框设置为同一行</td>
              <td>Boolean</td>
              <td>false</td>
            </tr>
            <tr>
              <td>placeholder</td>
              <td>设置提示信息</td>
              <td>String</td>
              <td>请输入内容</td>
            </tr>
            <tr>
              <td>disabled</td>
              <td>不可输入状态</td>
              <td>Boolean</td>
              <td>false</td>
            </tr>
            <tr>
              <td>value</td>
              <td>输入框的输入值</td>
              <td>String</td>
              <td></td>
            </tr>
            <tr>
              <td>label</td>
              <td>标签</td>
              <td>String</td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </section>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Input from '/@/components/yyxInput/index.vue'
import CodeCard from '/@/components/CodeCard/index.vue'

export default defineComponent({
  name: 'InputDocument',
  data() {
    return {
      originValue: '',
      originalPass: '',
    }
  },
  components: {
    Input,
    CodeCard,
  },
  setup() {
    const codeDes: Array<Record<string, string>> = [
      {
        description: '基本使用。',
        code: '这是一段代码',
      },
      {
        description: '带有标签的输入框。',
        code: '这是一段代码',
      },
      {
        description: '不可用状态的输入框',
        code: '这是一段代码',
      },
      {
        description: '带有前后缀图标的输入框',
        code: '这是一段代码',
      },
      {
        description: '密码输入框',
        code: '这是一段代码',
      },
      {
        description: '可清除的输入框',
        code: '这是一段代码',
      },
    ]
    return {
      codeDes,
    }
  },
})
</script>

<style lang="scss">
.button-document {
  margin: 0 0 0 40px;
  &-code {
    &-title {
      font-size: 24px;
      padding: 8px;
    }
    &-content {
      display: flex;
      flex-wrap: wrap;
      &-item {
        margin: 8px;
        flex: 1;
      }
    }
  }
}
</style>
